<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="header" lang="en">
<div th:fragment="content">
    <style>
        .input-group{
            width: 100%;
        }
    </style>

    <div class="row">
        <!-- 模拟手机 -->
        <div class="col-md-12">
            <form action="/Report/Save" method="post" class="card form-horizontal">
                <div class="card-header bg-primary">
                    <h4  style="text-align: center;" th:text="${template.getTemplateName()}">任务模板名称</h4>
                    <input type="text" id="taskId" th:value="${taskId}" style="display: none">
                    <input type="text" id="templateId" th:value="${template.getTemplateId()}" style="display: none">
                </div>
                <div class="card-body bg-white" style="height: 100%" th:utext="${template.getTemplateContext()}">
                    <!-- 填报内容 -->

                </div>
                <div class="card-toolbar">
                    <button onclick="checkSubmit()" type="button" class="btn btn-block btn-round btn-success">上报</button>
                </div>
            </form>
        </div>
    </div>
    <script>

        $(document).ready(function () {
            // 移除生成的onclick
            $("form div").removeAttr("onclick");
        })

        /**
         * 检查是否发送请求
         */
        function checkSubmit() {
            if ($("#templateId").val() === '')
                return false;
            if ($("#taskId").val() === '')
                return false;

            let data = $("form").serialize();
            if (data.length > 100)
                submitAjax($("#taskId").val(), $("#templateId").val(), data)
            return false;
        }

        /**
         * 上报数据
         * @param taskId 任务ID
         * @param templateId 模板ID
         * @param data 填报的数据（序列化）
         */
        function submitAjax(taskId, templateId, data){
            console.log("任务ID：",taskId)
            console.log("模板ID：",templateId)
            console.log("填报数据：",data)

            lightyear.loading('show');
            $.ajax({
                type: "POST",
                url: "/Report/Save" ,
                dataType: "json",
                data: {
                    "taskId":taskId,
                    "templateId": templateId,
                    "reportContent": data
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('成功了，页面即将自动跳转~', 'success', 300);
                            location.href = "/Report/List";
                        } else{
                            console.log("后端拒绝服务~")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });
        }


    </script>

</div>
</html>